<template>
	<view class="content mainpadding">
		<!-- 姓名 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">姓名</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入姓名"
				placeholder-style="color: #999999;" disabled v-model="name">
		</view>
		<!-- 電話 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">電話</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入電話"
				placeholder-style="color: #999999;" disabled v-model="phone">
		</view>
		<!-- 機車照片 -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">機車照片</view>
			<view class="flexleft flex_wrap">
				<!-- 機車正面 -->
				<view class="item_image_box margin_top" v-for="(item,index) in loco1_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,loco1,loco1_arr)"></view>
					</view>
				</view>
				<!-- 未上傳 -->
				<view class="item_image_box margin_top" @click="uploadImg(loco1,loco1_arr,1)" v-if="loco1_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/turn1.png" mode=""></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
				<!-- 機車侧面 -->
				<view class="item_image_box margin_top" v-for="(item,index) in loco2_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,loco2,loco2_arr)"></view>
					</view>
				</view>
				<!-- 未上傳 -->
				<view class="item_image_box margin_top" @click="uploadImg(loco2,loco2_arr,1)" v-if="loco2_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/turn2.png" mode=""></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
				<!-- 機車車牌 -->
				<view class="item_image_box margin_top" v-for="(item,index) in loco3_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,loco2,loco2_arr)"></view>
					</view>
				</view>
				<!-- 未上傳 -->
				<view class="item_image_box margin_top" @click="uploadImg(loco3,loco3_arr,1)" v-if="loco3_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/turn3.png" mode=""></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 上傳驾驶照 -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">上傳驾驶照</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in driveimage_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,driveimage,driveimage_arr)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(driveimage,driveimage_arr,1)"
					v-if="driveimage_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 良民證 -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">良民證</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in goodinage_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,goodinage,goodinage_arr)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(goodinage,goodinage_arr,1)"
					v-if="goodinage_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 意外險照片 -->
		<view class="mainpadding ffffff border" style="margin-bottom: 150rpx;">
			<view class="color_san text_a white_nowrap margin_right3">意外險照片</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in insureinage_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,insureinage,insureinage_arr)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(insureinage,insureinage_arr,1)"
					v-if="insureinage_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footerButton" @click="submit">
				提交審核
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [],
				name: "", //姓名
				phone: "", //電話
				loco1: [], //正面
				loco1_arr: [], //正面
				loco2: [], //侧面
				loco2_arr: [], //侧面
				loco3: [], //車牌
				loco3_arr: [], //車牌
				locoimages: [], //機車照片,
				locoimages_arr: [], //展示的機車照片,
				driveimage: [], //驾照
				driveimage_arr: [], //展示的驾照
				goodinage: [], //良民證
				goodinage_arr: [], //展示的良民證
				insureinage: [], //保險
				insureinage_arr: [], //展示的保險
			}
		},
		onLoad() {
			this.getDeliveryInfo()
			this.getUserInfo()
		},
		methods: {
			async getDeliveryInfo() { //實名認證信息
				let res = await this.http.request('/api/member/Idendeail', 'GET', {})
				this.name=res.data.name
			},
			async getUserInfo() { //用戶信息
				let res = await this.http.request('/api/member/userInfo', 'GET', {})
				this.phone=res.data.mobile
			},
			deleimage(i, upimg,arr) { //刪除圖片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			},
			async submit() {
				let _this = this
				if (!this.name) {
					this.http.toast("請輸入姓名！")
					return false
				}
				if (!this.phone) {
					this.http.toast("請輸入電話！")
					return false
				}
				if (!this.loco1.length) {
					this.http.toast("請上傳機車正面圖片！")
					return false
				}
				if (!this.loco2.length) {
					this.http.toast("請上傳機車侧面圖片！")
					return false
				}
				if (!this.loco3.length) {
					this.http.toast("請上傳機車車牌圖片！")
					return false
				}
				this.locoimages = [...this.loco1, ...this.loco2, ...this.loco3]
				if (!this.driveimage.length) {
					this.http.toast("請上傳驾驶照！")
					return false
				}
				if (!this.goodinage.length) {
					this.http.toast("請上傳良民證！")
					return false
				}
				if (!this.insureinage.length) {
					this.http.toast("請上傳意外險照片！")
					return false
				}
				let res = await this.http.request('/api/Takeaway/addTake', 'POST', {
					name: _this.name, //姓名
					phone: _this.phone, //電話
					locoimages: _this.locoimages.join(), //機車照片
					driveimage: _this.driveimage.join(), //驾照
					goodinage: _this.goodinage.join(), //良民證
					insureinage: _this.insureinage.join(), //保險
				})
				if (res.code == 1) {
					this.http.toast("提交成功")
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>